<template>
    <view class="container">
        <view class="image-container"  @click="test"  >
            <view class="image-box">
                <image src="" alt=""></image>
            </view>
            <view class="name-container">
                <text>王建国(语音通话)</text>
            </view>
        </view>
        <view class="circle-container" v-if="!showBotton" >
        </view>
        <view class="circle-container" v-if="showBotton" >
            <view class="circle"><u-button icon="mic" class="custom-style" size="large"></u-button></view>
            <view class="circle">
                <u-button type="error" icon="phone-fill" class="custom-style" size="large"></u-button>
            </view>
            <view class="circle"><u-button icon="volume" class="custom-style" size="large"></u-button></view>
        </view>
    </view>
</template>
  
<script>
export default {
    // navigationBarTitleText: '页面标题',
    // navigationStyle: 'custom'
    data() {
        return {
            showBotton: true
        }
    },
    methods: {
        test() {
            this.showBotton = !this.showBotton;
        }
    }
};
</script>
  
<style lang="scss">
page {
    height: 100vh;
    background-color: #505050;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 10% 0;
}

.name-container {
    margin-top: 3%;
    font-size: large;
    font-weight: 600;
    color: #fff;
}

.image-container {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    width: 100%;
    position: relative;
    /* 撑满容器宽度 */
}

.image-box {
    height: 100px;
    width: 100px;
    border: #ccc solid 3px;
    margin-top: 2%;
    position: absolute;
    top: 19%;
}

.circle-container {
    display: flex;
    width: 100%;
    height: 15%;
    /* 撑满容器宽度 */
    justify-content: space-around;
    /* 三个圆形盒子平均分布 */
}

.circle {
    width: 150rpx;
    /* 圆形盒子的宽度 */
    height: 150rpx;
    /* 圆形盒子的高度 */
    border: 2px solid black;
    border-radius: 50%;
    background-color: #ccc;

    .custom-style {
        width: 100%;
        height: 100%;
        color: #ff0000;
        border-radius: 50%;

        .u-icon{
            span {
                font-size: 40px;
            }
        }

    }
}
</style>